<template>
  <div>
    <div class="banner" @click="handleGallaryClick">
      <img class="banner-img" :src="bannerImg" />
      <div class="banner-info">
        <div class="banner-title">大连圣亚海洋世界(AAAA景区)</div>
        <div class="banner-number">
          <span class="iconfont banner-icon">&#xe626;</span>39
        </div>
      </div>
    </div>
    <!-- 图片画廊 -->
    <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut">
      <gallary :imgs="gallaryImgs" v-show="showGallary"></gallary>
    </transition>
  </div>
</template>

<script>
import Gallary from "commom/gallary/Gallary";
export default {
  name: "Banner",
  components: { Gallary },
  props: {
    bannerImg: String,
    gallaryImgs: Array
  },
  data() {
    return {
      showGallary: false // 是否显示图片画廊
    };
  },
  methods: {
    // 显示/关闭图片画廊
    handleGallaryClick() {
      this.showGallary = !this.showGallary;
    }
  },
  mounted() {
    this.$bus.$on("handleGarrlaryClose", this.handleGallaryClick);
  },
  beforeDestroy() {
    this.$bus.$off("handleGarrlaryClose");
  }
};
</script>

<style lang="less" scoped>
.banner {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 50%;
  &-img {
    width: 100%;
  }
  &-info {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    line-height: 0.6rem;
    background-image: linear-gradient(
      top,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.8)
    );
  }
  &-title {
    flex: 1;
    font-size: 0.32rem;
    padding: 0 0.2rem;
  }
  &-number {
    height: 0.32rem;
    margin: 0.14rem 0.14rem 0 0;
    padding: 0 0.2rem;
    font-size: 0.24rem;
    line-height: 0.32rem;
    border-radius: 0.2rem;
    background-color: rgba(0, 0, 0, 0.8);
  }
  &-icon {
    margin-right: 0.1rem;
    font-size: 0.24rem;
  }
}
</style>
